<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.year"
        type="number"
        placeholder="请输入年份"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.month"
        type="number"
        placeholder="请输入月份"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.week"
        type="number"
        placeholder="请输入周"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.batchNo"
        placeholder="请输入批次号"
        style="width: 200px;"
        class="filter-item"
      />
      <el-select
        v-model="listQuery.lineNo"
        placeholder="请选择生产线"
        clearable
        style="width: 200px"
        class="filter-item"
      >
        <el-option v-for="item in lineSelectOptions" :key="item.lineNo" :label="item.name" :value="item.lineNo" />
      </el-select>
      <el-input
        v-model="listQuery.vehicleType"
        placeholder="请输入车型"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="info"
        icon="el-icon-refresh"
        @click="handleReset"
      >重置</el-button>
    </div>
    <el-row>
      <el-col v-for="(item, index) in routerList" :key="index" :span="6">
        <div class="chart" ref="echart" :style="chartStyle" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import resize from "../mixins/resize";
import { fetchPlanExecuteList } from "@/api/bdc/output-chart";
import { fetchLineList } from '@/api/bdc/plan-query'
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
export default {
  name: "PlanExecuteChart",
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        year: undefined,
        month: undefined,
        week: undefined,
        batchNo: undefined,
        lineNo: undefined,
        vehicleType: undefined
      },
      lineSelectOptions: [],
      // echarts
      chart: null,
      chartStyle: { width: "100%", height: "300px" },
      routerList: []
    };
  },
  // watch: {
  //   routerList: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() {
    // test
    this.routerList = [
      { complete: 100, uncomplete: 0 },
      { complete: 90, uncomplete: 10 },
      { complete: 88, uncomplete: 12 },
      { complete: 80, uncomplete: 20 },
      { complete: 75, uncomplete: 25 },
      { complete: 70, uncomplete: 30 },
      { complete: 60, uncomplete: 40 }
    ];
    // this.$nextTick(() => {
    //   this.setOptions()
    // })
  },
  created() {
    // 获取生产线数据
    fetchLineList().then(res => {
      if (res.code == 200) {
        this.lineSelectOptions = res.data
      } else {
        this.$message.error('服务器内部错误！');
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // test
    radomData() {
      const complete = Math.ceil(Math.random() * 100);
      const uncomplete = 100 - complete;
      const item = {
        complete: complete,
        uncomplete: uncomplete
      };
      return item;
    },
    formatChartData(list) {
      let formatArr = [];
      for (const i of list) {
        let element = {
          title: "",
          series: []
        };
        for (const key in i) {
          if (i.hasOwnProperty(key)) {
            const item = i[key];
            switch (key) {
              case "name":
                element.title = item;
                break;
              case "accomplish":
                element.series.push({ name: "已完成", value: item });
                break;
              case "unfinished":
                element.series.push({ name: "未完成", value: item });
                break;
              default:
                break;
            }
          }
        }
        formatArr.push(element);
      }
      return formatArr;
    },
    // 查询
    handleFilter() {
      // this.getList()
      // this.routerList = this.routerList.map(a => this.radomData());
      // this.setOptions();
      // 格式化数据
      let month;
      if (this.listQuery.month && this.listQuery.month !== '') {
        month = this.listQuery.month.toString();
        if (month.length === 1) month = "0" + month;
      }
      let week;
      if (this.listQuery.week && this.listQuery.week !== '') {
        week = this.listQuery.week.toString();
        if (week.length === 1) week = "0" + week;
      }
      const data = {
        year: this.listQuery.year,
        month: month,
        week: week,
        batchNo: this.listQuery.batchNo,
        lineNo: this.listQuery.lineNo,
        vehicleType: this.listQuery.vehicleType
      };
      fetchPlanExecuteList(data).then(res => {
        if (res.code == 200) {
          // 初始化
          this.chartData = [];
          this.chartData = this.formatChartData(res.data);
          // console.log("res.data", res.data);
          this.setOptions();
        } else {
          this.$message.error("服务器内部错误！");
        }
      });
    },
    // 重置
    handleReset() {
      this.listQuery = {
        year: undefined,
        month: undefined,
        week: undefined,
        batchNo: undefined,
        lineNo: undefined,
        vehicleType: undefined
      };
    },
    // initChart() {
    //   this.chart = echarts.init(this.$refs.chart)
    //   this.setOptions(this.chartData)
    // },
    setOptions() {
      for (let i = 0; i < this.chartData.length; i++) {
        const element = this.chartData[i];
        const chart = echarts.init(this.$$refs.echarts[i]);
        chart.setOption({
          title: {
            text: element.title,
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: "完成量",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              data: element.series[1].value === 0 ? element.series.slice(-1) : element.series,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                },
                normal: {
                  color: function(params) {
                    if (params.data.name === '未完成') return '#626C91'
                    //自定义颜色
                    const colorList = [
                      "#01E17E",
                      "#626C91",
                      "#FE5656",
                      "#3DD1F9",
                      "#FFAD05"
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        });
      }
    }
  }
};
</script>